<template>
  <!--内容区域-->
  <div class="central">
    <!--轮播图-->
    <div class="lunbo">
      <el-row>
        <el-col :span="24">
          <div class="block">
            <el-carousel trigger="click" height="600px" :interval="2000">
              <!--遍历图片地址,动态生成轮播图-->
              <el-carousel-item v-for="item in imgList" :key="item.id">
                <!-- <img :src="item" alt /> -->
                <img :src="item.idView" class="image" width="800px" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--第一部分-->
    <div class="partone">
      <el-row :gutter="20">
        <!-- <el-col :span="4"></el-col> -->
        <el-col :span="20" :offset="2">
          <!--卡片-->
          <el-card class="box-card">
            <span style="float: left"><b>新闻公告</b></span>
            <el-button style="float: right; padding: 3px 0" type="text"
              >更多>></el-button
            ><br />
            <el-divider></el-divider>
            <!--内容区-->
            <div>
              <el-row>
                <el-col :span="10" :offset="1">
                  <!--左边轮播图-->
                  <div class="block">
                    <el-carousel trigger="click" height="260px">
                      <!--遍历图片地址,动态生成轮播图-->
                      <el-carousel-item v-for="item in imgList" :key="item.id">
                        <!-- <img :src="item" alt /> -->
                        <img :src="item.idView" class="image" width="600px" />
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                </el-col>

                <!--右边新闻公告列表-->
                <el-col :span="11" :offset="2">
                  <div class="right_content">
                    <el-table
                      :data="newsList"
                      style="width: 100%; font-size: 14px"
                      :show-header="false"
                      size="mini"
                      center
                    >
                      <el-table-column label="标题" width="360">
                        <template slot-scope="scope">
                          <span
                            ><a href="javascript:" @click="toNotices(scope.$index, scope.row)">{{
                              scope.row.title | ellipsis
                            }}</a></span
                          >
                        </template>
                      </el-table-column>
                      <el-table-column label="日期">
                        <template slot-scope="scope">
                          <span>{{ scope.row.createTime | FormatDate("yyyy-MM-dd")}}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4"></el-col>
      </el-row>
    </div>

    <!--第二部分-->
    <div class="parttwo">
      <el-row>
        <!-- <el-col :span="4"></el-col> -->
        <el-col :span="20" :offset="2">
          <!--内容区-->
          <div class="content">
            <el-row>
              <el-col :span="11">
                <table style="width: 100%">
                  <tr>
                    <th>
                      <span style="float: left; margin-left: 70px"
                        >教务信息</span
                      >
                    </th>
                    <th>
                      <el-button
                        style="color: white; float: right; padding: 3px 0"
                        type="text"
                        >更多>></el-button
                      >
                    </th>
                  </tr>
                  <tr>
                    <td><a href="#">泛Mocc职业教育，效果和就业为王</a></td>
                    <td align="right"><span>2015/08/08</span></td>
                  </tr>
                  <tr>
                    <td><a href="#">泛Mocc职业教育，效果和就业为王</a></td>
                    <td align="right"><span>2015/08/08</span></td>
                  </tr>
                  <tr>
                    <td><a href="#">泛Mocc职业教育，效果和就业为王</a></td>
                    <td align="right"><span>2015/08/08</span></td>
                  </tr>
                  <tr>
                    <td><a href="#">泛Mocc职业教育，效果和就业为王</a></td>
                    <td align="right"><span>2015/08/08</span></td>
                  </tr>
                  <tr>
                    <td><a href="#">泛Mocc职业教育，效果和就业为王</a></td>
                    <td align="right"><span>2015/08/08</span></td>
                  </tr>
                  <tr>
                    <td><a href="#">泛Mocc职业教育，效果和就业为王</a></td>
                    <td align="right"><span>2015/08/08</span></td>
                  </tr>
                  <tr>
                    <td><a href="#">泛Mocc职业教育，效果和就业为王</a></td>
                    <td align="right"><span>2015/08/08</span></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="11">
                <table style="width: 100%">
                  <tr>
                    <th>
                      <span style="float: left; margin-left: 70px"
                        >党建活动</span
                      >
                    </th>
                    <th>
                      <el-button
                        style="color: white; float: right; padding: 3px 0"
                        type="text"
                        >更多>></el-button
                      >
                    </th>
                  </tr>
                  <tr>
                    <td><a href="#">泛Mocc职业教育，效果和就业为王</a></td>
                    <td align="right"><span>2015/08/08</span></td>
                  </tr>
                  <tr>
                    <td><a href="#">泛Mocc职业教育，效果和就业为王</a></td>
                    <td align="right"><span>2015/08/08</span></td>
                  </tr>
                  <tr>
                    <td><a href="#">泛Mocc职业教育，效果和就业为王</a></td>
                    <td align="right"><span>2015/08/08</span></td>
                  </tr>
                  <tr>
                    <td><a href="#">泛Mocc职业教育，效果和就业为王</a></td>
                    <td align="right"><span>2015/08/08</span></td>
                  </tr>
                  <tr>
                    <td><a href="#">泛Mocc职业教育，效果和就业为王</a></td>
                    <td align="right"><span>2015/08/08</span></td>
                  </tr>
                  <tr>
                    <td><a href="#">泛Mocc职业教育，效果和就业为王</a></td>
                    <td align="right"><span>2015/08/08</span></td>
                  </tr>
                  <tr>
                    <td><a href="#">泛Mocc职业教育，效果和就业为王</a></td>
                    <td align="right"><span>2015/08/08</span></td>
                  </tr>
                </table>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--第三部分-->
    <div class="partthree">
      <el-row>
        <!-- <el-col :span="4"></el-col> -->
        <el-col :span="18" :offset="4">
          <!--内容区-->
          <div>
            <el-row>
              <el-col :span="11">
                <div class="top">
                  <el-row>
                    <el-col :span="12">
                      <span style="float: left; margin-left: 50px"
                        ><b>教学成果</b></span
                      >
                    </el-col>
                    <el-col :span="12">
                      <el-button @click="toTeachList" style="padding: 3px 0" type="text"
                        >更多>></el-button
                      >
                    </el-col>
                  </el-row>
                </div>

                <!--教学成果表格数据-->
                <el-table
                  :data="teachList"
                  style="width: 100%; font-size: 16px"
                  :show-header="false"
                  size="small"
                >
                  <el-table-column label="标题">
                    <template slot-scope="scope">
                      <span
                        ><a href="javascript:" @click="toPosts(scope.$index, scope.row)">{{
                          scope.row.title | ellipsis2
                        }}</a></span
                      >
                    </template>
                  </el-table-column>
                  <el-table-column label="日期">
                    <template slot-scope="scope">
                      <span>{{ scope.row.createTime | FormatDate("yyyy-MM-dd") }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="11">
                <div class="top">
                  <el-row>
                    <el-col :span="12">
                      <span style="float: left; margin-left: 50px"
                        ><b>科研成果</b></span
                      >
                    </el-col>
                    <el-col :span="12">
                      <el-button @click="toScienceList" style="padding: 3px 0" type="text"
                        >更多>></el-button
                      >
                    </el-col>
                  </el-row>
                </div>
                <!--科研成果表格数据-->
                <el-table
                  :data="scienceList"
                  style="width: 100%; font-size: 16px"
                  :show-header="false"
                  size="small"
                >
                  <el-table-column label="标题">
                    <template slot-scope="scope">
                      <span
                        ><a href="javascript:" @click="toPosts(scope.$index, scope.row)">{{
                          scope.row.title | ellipsis2
                        }}</a></span
                      >
                    </template>
                  </el-table-column>
                  <el-table-column label="日期">
                    <template slot-scope="scope">
                      <span>{{ scope.row.createTime | FormatDate("yyyy-MM-dd")}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--第四部分-->
    <div class="partfour">
      <el-row class="left">
        <el-col :span="24"
          ><div class="pic">
            <a href="#"><img src="../../assets/home/main/zt1.png" /></a>
          </div>
          <div class="pic">
            <a href="#"><img src="../../assets/home/main/zt2.png" /></a>
          </div>
        </el-col>
        <!-- <el-col :span="12"><img src="../../assets/home/main/zt2.png"></el-col> -->
      </el-row>
      <el-row class="right">
        <el-col :span="24"
          ><div class="pic">
            <a href="#"><img src="../../assets/home/main/zt3.png" /></a>
          </div>
          <div class="pic">
            <a href="#"><img src="../../assets/home/main/zt4.png" /></a>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import {getNoticeList} from '@/api/home';
import { findNoticeById } from "@/api/notice";

import {findByType,findById} from "@/api/article";

export default {
  //限制显示的长度
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 16) {
        return value.slice(0,16) + '...'
      }
      return value
    },
    ellipsis2 (value) {
      if (!value) return ''
      if (value.length > 12) {
        return value.slice(0,12) + '...'
      }
      return value
    }
  },
  data() {
    return {
      current:1,
      size:7,
      //轮播图
      imgList: [
        { id: 0, idView: require("../../assets/home/index03.jpg") },
        { id: 1, idView: require("../../assets/home/index04.jpg") },
        { id: 2, idView: require("../../assets/home/index01.jpg") },
        { id: 3, idView: require("../../assets/home/index02.jpg") },
      ],
      // 图片父容器高度
      bannerHeight: 1000,
      // 浏览器宽度
      screenWidth: 0,
      activeIndex: "1",

      /**新闻公告 */
      newsList:[],
      /**教学成果 */
      teachList:[],
      /**科研成果 */
      scienceList:[],
      newsList2: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  props:
    ['query']
  ,
  created(){
    /**获取新闻列表 */
    this.getNewsList();
    /**获取教学成果 */
    this.getTeachList();
    /**获取科研成果 */
    this.getScienceList();
  },
  mounted() {
    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth;
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
    };
  },
  methods: {
    // 跳转到新闻
    async toNotices(index,row) {
      console.log("row:"+row);
      const { data: res } = await findNoticeById(row.id);
      if (200 == res.code) {
        console.log(res.data);
        this.$router.push({
          path: "/posts",
          // infoData:res.data
          query: res.data,
        });
      } else {
        this.$message.error("查找失败！");
      }
    },

    // 跳转到帖子
    async toPosts(index,row) {
      console.log("row:"+row);
      const { data: res } = await findById(row.id);
      if (200 == res.code) {
        console.log(res.data);
        this.$router.push({
          path: "/posts",
          // infoData:res.data
          query: res.data,
        });
      } else {
        this.$message.error("查找失败！");
      }
    },


    //跳转到教学成果列表
    toTeachList(){
      this.$router.push("introduction/"+13);
    },

    //跳转到科研成果列表
    toScienceList(){
        this.$router.push("introduction/"+13);
    },

    //获取新闻公告列表
    async getNewsList(){
      const {data : res}= await getNoticeList(this.current,this.size);
      console.log(res.data.list)
      this.newsList = res.data.list;
    },
    //获取教学成果
    async getTeachList(){
      const {data : res}= await findByType(this.current,this.size,17);
      console.log(res.data.list)
      this.teachList = res.data.list;
    },
    //获取科研成果
    async getScienceList(){
      const {data : res}= await findByType(this.current,this.size,13);
      console.log(res.data.list)
      this.scienceList = res.data.list;
    },

  },
};
</script>

<style scoped>
/* 轮播图 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/*设置图片和浏览器宽度一致 */
.block img {
  width: 100%;
  height: inherit;
}

/* 第一部分样式 */
/* 卡片样式 */
.partone {
  margin-top: 30px;
}
.partone box-card {
  padding-top: 30px;
}
/* 表格样式 */
table {
  padding: 30px;
  line-height: 35px;
}
table a {
  color: #212121;
  text-decoration: none;
  font-size: 16;
}
table a:hover {
  color: #ffd04b;
  border-color: #40d2b1;
}
/*轮播图样式 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/**第二部分 */
.parttwo {
  background: #2267b1;
  margin-top: 50px;
  color: white;
}

.parttwo table {
  background-color: #2267b1;
  color: white;
}

.parttwo table a {
  color: white;
}
.parttwo table a:hover {
  color: black;
}
/**第三部分 */
.partthree {
  min-height: 400px;
}

/**第四部分 */
.partfour {
  background: #f2f2f2;
  display: flex;
  flex-wrap: wrap; /*换行 */
  justify-content: center; /*对齐方式 */
  padding: 50px;
}
.partthree .top {
  padding: 20px 5px;
  margin-top: 20px;
}

/**底部特效 */
/* 图片盒子的样式，宽高、边框、阴影、位置、鼠标样式、溢出 */
.pic {
  width: 500px;
  height: 200px;
  border: 1px solid white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
/* 图片标题的样式，宽高、背景色、水平垂直居中、定位，透明度 */
.pic span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 500px;
  height: 60px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24px;
  line-height: 50px;
  text-align: center;
  opacity: 0;
}
/* 给需要动画的元素加过渡属性 */
.pic img,
.pic span {
  transition: all 0.5s;
  width: 500px;
  height: 200px;
}
/* hover之后透明动画 */
.pic:hover span {
  opacity: 1;
}
/* hover之后图片放大的效果 */
.pic:hover img {
  transform: scale(1.3);
}

/* 右栏列表样式 */
/* .right_content {
  padding: 2px;
}
.right_content .right_top {
  margin-bottom: 20px;
  margin-left: 10px;
}
a {
  text-decoration: none;
} */
</style>